<!--
 * @Description: 用户注册组件
 * @Author: hai-27
 * @Date: 2020-02-19 22:20:35
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-01 15:34:34
 -->
<template>
  <div id="register">
    <el-dialog title="注册" width="350px" center :visible.sync="isRegister">
      <el-form
          :model="RegisterUser"
          status-icon
          ref="ruleForm"
          class="demo-ruleForm"
      >
        <el-form-item prop="phone">
          <el-input
              prefix-icon="el-icon-user-solid"
              placeholder="请输入手机号"
              v-model="RegisterUser.phone"
          ></el-input>
        </el-form-item>


        <el-row>
          <el-button type="primary" plain @click="queryCode">获取验证码</el-button>
        </el-row>

        <el-form-item prop="code">
          <el-input
              prefix-icon="el-icon-view"
              type="code"
              placeholder="请输入验证码"
              v-model="RegisterUser.code
              "
          ></el-input>
        </el-form-item>

        <el-form-item prop="pass">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="请输入密码"
              v-model="RegisterUser.pass"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmPass">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="请再次输入密码"
              v-model="RegisterUser.confirmPass"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="Register" style="width:100%;">注册</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/utils/request";

export default {
  name: "MyRegister",
  props: ["register"],
  data() {

    return {
      isRegister: false, // 控制注册组件是否显示
      RegisterUser: {
        phone: "",
        pass: "",
        confirmPass: "",
        code:""
      },

    };
  },
  watch: {
    // 监听父组件传过来的register变量，设置this.isRegister的值
    register: function (val) {
      if (val) {
        this.isRegister = val;
      }
    },
    // 监听this.isRegister变量的值，更新父组件register变量的值
    isRegister: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
        this.$emit("fromChild", val);
      }
    }
  },
  methods: {
    //获取验证码
    queryCode(){
      request({
        url:"/api/auth/user/queryCode",
        method:"get",
        params:{
          phone:this.RegisterUser.phone
        }
      }).then(res=>{
        alert(res.msg)
      })
    },

    Register() {
     request({
       url:"/api/auth/user/register",
       method:"post",
       data:{
         userPhone:this.RegisterUser.phone,
         userPassword:this.RegisterUser.pass,
         code:this.RegisterUser.code,
       }
     }).then(res=>{
      this.isRegister = false;
       alert(res.msg)
     });

    },
  }
};
</script>
<style>
</style>
